<template>
    <div>
        <!-- 轮播图区域 -->
        <swiper :lunbotuList="lunbotuList" :isfull="true"></swiper>

         <ul class="mui-table-view mui-grid-view mui-grid-9">
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><router-link to="/home/newslist">
		            <img src="../../images/1.jpeg" alt="">
		            <div class="mui-media-body">新闻资讯</div></router-link></li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><router-link to="/home/photolist">
		            <img src="../../images/2.jpg" alt=""> 
		            <div class="mui-media-body">图片分享</div></router-link></li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><router-link to="/home/goodslist">
		            <img src="../../images/3.jpeg" alt="">
		            <div class="mui-media-body">商品购买</div></router-link></li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">    
		           <img src="../../images/4.jpeg" alt="">
		            <div class="mui-media-body">浏览反馈</div></a></li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
		            <img src="../../images/5.jpeg" alt="">
		            <div class="mui-media-body">视频专区</div></a></li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
		            <img src="../../images/6.jpeg" alt="">
		            <div class="mui-media-body">联系我们</div></a></li>
		</ul> 
        
    </div>  
</template>

<script>
import { Toast } from "mint-ui"
import swiper from "../subcomponents/swiper.vue"

    export default {
        data(){
            return {
                lunbotuList:[], // 保存轮播图的数组
            }
        },
        created(){
            this.getLunbotu();
        },
        methods:{
            getLunbotu(){ // 获取轮播图数据的方法
                this.$http.get("api/getlunbo").then(result => {
                  if(result.body.status === 0){
                      this.lunbotuList = result.body.message
                  }else{
                      // 加载失败
                      Toast({
                          message:'加载轮播图失败',
                          duration:5000
                      })
                  }
                })
            }
        },
        components:{
            swiper
        }
    }

</script>

<style lang="scss" scoped>
   
    .mui-grid-view.mui-grid-9{
            background-color: #fff;
           img{
               height: 60px;
           }
           .mui-media-body{
               font-size: 13px;
           }
        }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        border:none;
    }
</style>